<template>
    <div class="container">
        <div class="order_detail">

            <!-- 订单信息 -->

            <el-card shadow="never" :body-style="{ padding: 0 }">
                <div slot="header">
                        <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                        <span>退货商品</span>
                </div>
                <!-- card body -->

                <div class="table_box">

                    <el-table :data="dataSource1" border style="border: none!important;">
                        <el-table-column align="center" prop="no" label="商品图片">{{ orderDetail.orderNo || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="flo" label="商品名称"></el-table-column>
                        <el-table-column align="center" prop="phone" label="价格/货号">{{ orderDetail.tel || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="payType" label="属性">{{ orderDetail.payName ||
                            '-' }}</el-table-column>
                        <el-table-column align="center" prop="source" label="数量">{{
                            selectDictLabel(dict.type.order_source, orderDetail.orderSource) }}</el-table-column>
                        <el-table-column align="center" prop="source" label="计件">{{
                            selectDictLabel(dict.type.order_source, orderDetail.orderSource) }}</el-table-column>
                    </el-table>
                    <div class="total">
                        <span>合计：</span>
                        <span style="color: red;">￥200</span>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top: 40px;" shadow="never" :body-style="{ padding: '20px' }">
                <div slot="header">
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                        <span>服务单信息</span>
                </div>
                <el-descriptions class="margin-top" :column="2" :size="size" border content-class-name="my-content" labelClassName="des-title">
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            服务单号
                        </template>
                        kooriookami
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            申请状态
                        </template>
                        18100000000
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            订单编号
                        </template>
                        苏州市
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            申请时间
                        </template>
                        <el-tag >学校</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            用户账号
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            联系人
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            联系电话
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                        退货原因
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            问题描述
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            凭证照片
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                </el-descriptions>

                <el-descriptions class="mt20" :column="2" :size="size" border labelClassName="des-title" content-class-name="my-content">
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            订单金额
                        </template>
                        kooriookami
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            退运费
                        </template>
                        <el-radio-group >
                            <el-radio :label="3">不退运费</el-radio>
                            <el-radio :label="6">退运费</el-radio>
                        </el-radio-group>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            确认退款金额
                        </template>
                        <el-input ></el-input>
                        
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            选择收货点
                        </template>
                        <el-tag >学校</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            收货人姓名
                        </template>
                        
                        <el-input v-model="form.receive" placeholder="" ></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            所在区域
                        </template>
                        <el-cascader style="width: 218px;" :options="options" v-model="selectedSaleOptions">
                        </el-cascader>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            详细地址
                        </template>
                        <el-input ></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                        联系电话
                        </template>
                        <el-input ></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2">
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            智能识别
                        </template>
                        <div class="smart">
                            <el-input type="textarea" :rows="4" class="smart-input" placeholder="请输入内容" v-model="smart"/>
                            <div class="smart-btn" @click="parseInfo">智能识别</div>
                        </div>
                    
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            处理备注
                        </template>
                        <el-input type="textarea" :rows="4"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        <div class="btn_bottom">
                <el-button type="primary" @click="submit">确认退货</el-button>
                <el-button @click="cancel" type="danger">拒绝退货</el-button>
        </div>
        </div>
        
    </div>
</template>

<script>
import smart from 'address-smart-parse'
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
export default {
    name: "refundDetail",
    dicts: [],
    components: {},
    data() {
        return {
            orderDetail: {},
            orderGoods: [],
            orderLog: [],
            orderLogLoading: false,
            options:regionData,
            smartInfo:{},
            form:{},
            smart:'',
            dataSource1: [
                { no: 201707196398345, flo: '201707196398345', phone: '18000000000', payType: '支付宝', source: 'APP订单', type: '普通订单' },
            ],
            dataSource2: [
                { no: 201707196398345, flo: '201707196398345', phone: '18000000000', payType: '支付宝', source: 'APP订单', type: '普通订单' },
            ],
            statusArr: [
                { label: '提交订单', des: '2017-07-19 15:43:23', value: 1 },
                { label: '支付订单', des: '2017-07-19 15:43:23', value: 0 },
                { label: '平台发货', des: '2017-07-19 15:43:23', value: 0 },
                { label: '确认收货', des: '2017-07-19 15:43:23', value: 0 },
                { label: '完成评价', des: '2017-07-19 15:43:23', value: 0 },
            ],
            orderLogPage: {
                page: 1,
                size: 10,
                total: 0
            }
        }
    },
    created() {
        // this.getOrderDetail();
        // this.getOrderGoods();
        // this.getOrderLog();
    },
    methods: {
        getOrderDetail() {
            this.$http.get(`/order/${this.$route.params.id}`).then(res => {
                this.orderDetail = res.data;
            });
        },
        getOrderGoods() {
            this.$http.get(`/order/${this.$route.params.id}/goods`).then(res => {
                this.orderGoods = res.data;
            });
        },
        getOrderLog() {
            this.orderLogLoading = true;
            this.$http.get(`/order/${this.$route.params.id}/log`, {
                params: {
                    page: this.orderLogPage.page,
                    size: this.orderLogPage.size
                }
            }).then(res => {
                this.orderLog = res.data;
                this.orderLogLoading = false;
            });
        },
        handleSizeChange(val) {
            this.orderLogPage.size = val;
            this.getOrderLog();
        },
        handleCurrentChange(val) {
            console.log('666 :>> ', 666);
            this.orderLogPage.page = val;
            this.getOrderLog();
        },
        handleAdd() {
            // Add your logic here
        },
        handleTrackShow() {
            console.log('this.$refs :>> ', this.$refs);
            this.$refs.orderTracking.show();
        },
        // 修改发票信息
        editInvoice() {
            this.$refs.editInvoiceForm.show();
        },
        // 修改收货人信息
        editConsignee() {
            this.$refs.editConsigneeForm.show();
        },
        // 修改商品信息
        editMaterial() {
            this.$refs.editMaterialInfo.show();
        },
        // 修改费用信息
        editFeeInfo() {
            this.$refs.editFeeInfo.show();
        },
        // 发送站内信
        sendMessage() {
            this.$refs.sendMessageForm.show();
        },
        // 备注订单
        markOrder() {
            this.$refs.markForm.show();
        },
        parseInfo() {
            let result = smart(this.smart)
            console.log('result :>> ', result);
            // this.selectedSaleOptions = result
        },
    }

}
</script>

<style lang="scss" scoped>
.order_detail {
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.table_box {
    .total {
        padding: 15px;
        font-size: 16px;
        font-weight: 600;
        text-align: right;
        background-color: #f8f8f9;
    }
}

.mark {
    width: 18px;
    margin-right: 10px;
    vertical-align: bottom;
}

.mark_info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.des-title {
    text-align: right;
    padding-right: 20px;
}
.btn_bottom{
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    max-width: 1560px;
    padding:10px 10px 30px;
    background-color: #fff ;
}
.smart{
    display: flex;
    align-content: center;
}
.smart-btn{
    width: 100px;
    text-align: center;
    background-color: #409EFF;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
}
.smart-btn:hover{
    background-color: #66b1ff;
}
</style>
<style type="text/css" lang="scss">
.order_detail .el-card__header {
    background-color: #f5f7fa;
    padding: 15px;
}
.order_detail .el-descriptions-item__label {
    width: 150px;
    text-align: right!important;
}

.smart-input{
    width: 80%;
    textarea{
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
}

.my-content{
    width: 40%;
}
</style>